<template>
	<!-- 生产计划 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="2" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">采煤计划</text></view>
				</template>
				<my-grid :list="list" :decimals="2"></my-grid>
				<view class="fw m-t-10 tc"> 年度采煤计划趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="1" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">剥离计划</text></view>
				</template>
				<my-grid :list="list2" :decimals="2"></my-grid>
				<view class="fw m-t-10 tc"> 年度剥离计划趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">接替计划</text></view>
				</template>
				<u-tabs lineColor="#2172FC" :list="[{name: '原煤产量'},{name: '土方剥离'}]" lineWidth="60" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">运输计划</text></view>
				</template>
				<view class="flex p-10 s-center m-between" style="background-color: #F5F7FE;">
					<view class=""> 年度计划运量 </view>
					<view class="flex">
						<u--text text="2200" size="16" color="#0853FF" bold="true" align="center"></u--text>
						<text class="m-l-5">万m³</text>
					</view>
				</view>
				<uni-table ref="table" stripe emptyText="暂无更多数据" style="width: 100%;">
					<uni-tr>
						<uni-th align="center" width="90">水平</uni-th>
						<uni-th align="center" width="80">台阶高度</uni-th>
						<uni-th align="center" width="80">提示高度</uni-th>
						<uni-th align="center" width="80">平均运距</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index" style="background-color: red !important;">
						<uni-td align="center"><u--text :text="item.value" size="12" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value3" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="5" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">爆破计划</text></view>
				</template>
				<my-grid :list="list5" :col="2"></my-grid>
				<u-tabs lineColor="#2172FC" :list="[{name: '东采场'},{name: '西采场'}]" lineWidth="50" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<uni-table ref="table" emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">爆破方量(m³)</uni-th>
						<uni-th align="center">工作面测算单耗(kg/m³)</uni-th>
						<uni-th align="center">炸药量(t)</uni-th>
						<uni-th align="center">爆破率(m³/m)</uni-th>
						<uni-th align="center">炸药名称</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData1" :key="index">
						<uni-td align="center"><u--text :text="item.value" size="12" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value3" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value4" size="12"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="6" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">钻孔计划</text></view>
				</template>
				<my-grid :list="list6"></my-grid>
				<u-tabs lineColor="#2172FC" :list="[{name: '东采场'},{name: '西采场'}]" lineWidth="50" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<uni-table ref="table" emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="80">孔深</uni-th>
						<uni-th align="center">孔网</uni-th>
						<uni-th align="center">孔径</uni-th>
						<uni-th align="center">底盘抵抗线</uni-th>
						<uni-th align="center">台阶工作面角</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData2" :key="index">
						<uni-td align="center"><u--text :text="item.value" size="12" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value3" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value4" size="12" color="#0853FF" bold="true" align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5, 6])
	const baseOpts = {
		padding: [10, 10, 0, 10],
		enableScroll: false,
		dataLabel: false,
		legend: {
			show: true
		},
		xAxis: {
			disableGrid: true,
			mix: 0
		},
		yAxis: {
			gridType: "solid",
			dashLength: 2,
			showTitle: true,
			gridColor: '#E0E6F1',
			data: [{
				min: 0,
				axisLine: false,
				titleFontColor: '#8993A8',
				title: '万t'
			}]
		},
		extra: {
			column: {
				type: "stack",
				width: 10,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal",
			}
		}
	}
	let list = ref([{ // 产销统计
			title: '年度计划总量',
			value: '12',
			unit: '万吨'
		}, {
			title: '东采场计划',
			value: '20.34',
			unit: '万吨'
		}, {
			title: '西采场计划',
			value: '24.10',
			unit: '万吨t'
		}]),
		list2 = ref([{
			title: '日剥离量',
			value: '176',
			unit: '万m³'
		}, {
			title: '本月累计',
			value: '120',
			unit: '万m³'
		}, {
			title: '本月计划',
			value: '55',
			unit: '万m³'
		}]),
		list3 = ref([{
			title: '日销售量',
			value: '5.34',
			unit: '万吨'
		}, {
			title: '本月累计',
			value: '20.41',
			unit: '万吨'
		}]),
		list4 = ref([{
			title: '日挖机装载车数',
			value: '90',
			unit: '辆'
		}, {
			title: '日挖机装载总量',
			value: '190',
			unit: '万吨'
		}]),
		list5 = ref([{
			title: '年度计划爆破方量',
			value: '2200',
			unit: '万m³'
		}, {
			title: '年度计划炸药量',
			value: '2527',
			unit: '吨'
		}]),
		list6 = ref([{
			title: '年度钻孔计划',
			value: '1111',
			unit: 'm'
		}, {
			title: '东采场计划',
			value: '222222',
			unit: 'm'
		}, {
			title: '西采场计划',
			value: '333333',
			unit: 'm'
		}]),
		chartData = ref({}),
		chartData1 = ref({}),
		chartData2 = ref({}),
		tableData = ref([{
			value: '-560~+600',
			value1: '10m',
			value2: '100m',
			value3: '1122m'
		}, {
			value: '-560~+600',
			value1: '10m',
			value2: '100m',
			value3: '1122m'
		}]),
		tableData1 = ref([{
			value: '5360',
			value1: '0.19',
			value2: '104.3',
			value3: '30',
			value4: '混制炸药'
		}, {
			value: '5360',
			value1: '0.19',
			value2: '104.3',
			value3: '30',
			value4: '混制炸药'
		}]),
		tableData2 = ref([{
			value: '3~10m³',
			value1: '5m',
			value2: '155mm',
			value3: '7m',
			value4: '65'
		}]),
		opts = {
			color: ["#4C63F6", "#55BEFF"],
			...baseOpts
		},
		opts1 = {
			color: ["#F6CC58", "#00B578"],
			...baseOpts
		},
		opts2 = {
			color: ["#fff", "#00B578"],
			...baseOpts,
			legend: {
				show: false
			},
			extra: {
				column: {
					type: "group",
					width: 20,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "custom",
					seriesGap: 5,
					linearOpacity: 0.5,
					barBorderCircle: true,
					customColor: ["#2172FC"]
				}
			}
		}
	const getServerData = () => {
		// 产煤作业计划
		setTimeout(() => {
			let res = {
				categories: ["8.1", "8.2", "8.5", "8.6", "8.9", "8.20"],
				series: [{
					name: "东采场",
					data: [2, 8, 5, 7, 4, 2]
				}, {
					name: "西采场",
					data: [10, 8, 5, 7, 4, 2]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	const getServerData1 = () => {
		setTimeout(() => {
			let res = {
				categories: ["8.1", "8.2", "8.5", "8.6", "8.9", "8.20"],
				series: [{
					name: "东采场",
					data: [2, 8, 5, 7, 4, 2]
				}, {
					name: "西采场",
					data: [10, 8, 5, 7, 4, 2]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	const getServerData2 = () => {
		// 接替计划
		setTimeout(() => {
			let res = {
				categories: ["8.1", "8.2", "8.5", "8.6", "8.9", "8.20"],
				series: [{
					name: "东采场",
					data: [2, 8, 5, 7, 4, 2]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	onShow(() => {
		getServerData()
		getServerData1()
		getServerData2()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
</style>